package tool.encode

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.resources.stringResource
import top.mcwebsite.devtoolbox.devtoolbox.generated.resources.Res
import top.mcwebsite.devtoolbox.devtoolbox.generated.resources.input_colon
import top.mcwebsite.devtoolbox.devtoolbox.generated.resources.output_colon

@Composable
fun EncodeAndDecodeToolUI(
    name: String,
    onBackClick: () -> Unit,
    convert: (String) -> String
) {
    Column {
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            IconButton(onClick = { onBackClick() }) {
                Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = null)
            }
            Text(text = name, style = MaterialTheme.typography.headlineSmall)
        }
        Box(
            modifier = Modifier.fillMaxSize()
                .padding(top = 8.dp)
                .background(brush = SolidColor(MaterialTheme.colorScheme.surface))
                .border(width = 1.dp, color = MaterialTheme.colorScheme.outlineVariant, shape = MaterialTheme.shapes.large)
        ) {
            Column(
                modifier = Modifier.padding(16.dp)
            ) {
                var input by remember { mutableStateOf("") }
                var output by remember { mutableStateOf("") }
                Text(stringResource(Res.string.input_colon), modifier = Modifier.padding(bottom = 8.dp))
                OutlinedTextField(
                    value = input,
                    onValueChange = {
                        input = it
                        output = convert(input)
                    },
                    modifier = Modifier.fillMaxWidth()
                        .height(200.dp)
                )
                Text(stringResource(Res.string.output_colon), modifier = Modifier.padding(top = 16.dp, bottom = 8.dp))
                SelectionContainer {
                    Text(
                        text = output,
                        modifier = Modifier.fillMaxWidth()
                            .height(200.dp)
                            .background(brush = SolidColor(MaterialTheme.colorScheme.surface))
                            .border(
                                width = 1.dp,
                                color = MaterialTheme.colorScheme.outlineVariant,
                                shape = MaterialTheme.shapes.medium
                            )
                            .padding(10.dp)
                    )
                }

            }
        }
    }
}